<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue-router</title>
	<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>  
</head>
<body>
<div id="app9">
    <h1>vue-router 组件导航钩子（与动态组件的watch监听有一定区别）</h1>
  
    <p>{{ message}}</p> 
    <p style='color:red;'> 组件内有两个生命周期钩子  beforeRouteEnter(进入路由组件时)与 beforeRouteLeave(离开路由组件时) 。</p>
    <p style='color:red;'>beforeRouteEnter 钩子 不能 访问 this，因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。</p>
    <p style='color:red;'>但你可以 在 beforeRouteLeave 中直接访问 this。</p>
          <p> <a href="http://router.vuejs.org/zh-cn/advanced/navigation-guards.html" target="_blank">详见官网：http://router.vuejs.org/zh-cn/advanced/navigation-guards.html</a></p>
     <router-link to="/a">a连接</router-link>
      <router-link to="/b">b连接</router-link>
       <router-link to="/c">c连接</router-link>

       <router-view></router-view>
</div>
</body>
<script>
const luyou9 = new VueRouter({
	routes : [
	     {
	    	path: "/a",
	    	components : {
	    		default : {
	    	     template : "<div>a连接a连接a连接a连接 </div>"	,
	    	     beforeRouteEnter (to, from, next) {    //当进入该路由的时候
	    	    	    alert("离开时的链接：" +  from.path +  " 将进入的链接：" + to.path);  // to和form都是一个router对象  输出进入的路由的路径 和离开的路由路径
	    	    	    next();  //调用钩子函数后 必须next(); 表示钩子运行已结束
	    	    	  }
	    		}
	    	},
	     },
	     {
		    	path: "/b",
		    	components : {
		    		default : {
		    	     template : "<div>b连接b连接b连接b连接 </div>"	,
		    	     beforeRouteEnter (to, from, next) {    //当进入该路由的时候
		    	    	    alert( "离开时的链接：" +  from.path +  " 将进入的链接：" + to.path);  // to和form都是一个router对象  输出进入的路由的路径 和离开的路由路径
		    	    	    next();  //调用钩子函数后 必须next(); 表示钩子运行已结束
		    	    	  }
		    		}
		    	},
		     } ,
		     {
			    	path: "/c",
			    	components : {
			    		default : {
			    	     template : "<div>c连接c连接c连接c连接 </div>"	,
			    	     beforeRouteEnter (to, from, next) {    //当进入该路由的时候
			    	    	    alert("离开时的链接：" +  from.path +  " 将进入的链接：" + to.path);  // to和form都是一个router对象  输出进入的路由的路径 和离开的路由路径
			    	    	    next({
			    	    	    	path: "/newUrl" //跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。			    	    	    	
			    	    	    });  //调用钩子函数后 必须next(); 表示钩子运行已结束
			    	    	  }
			    		}
			    	},
			  } 
	 ]	
});

 	
new Vue({
	el : "#app9", 
	router : luyou9,
	data : {
		message  : " router 组件导航钩子"
	}
	
});

</script>
</html>